// 紧急控制面板组件

import React from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  AlertTriangle,
  Phone,
  Square,
  Volume2,
  VolumeX,
  Shield,
  Camera,
  MapPin,
  Users,
  Zap
} from 'lucide-react';

const EmergencyPanel: React.FC = () => {
  const { emergencyStop, userRole, vehicleStatus, addSystemMessage } = useHmiState();

  const handleEmergencyCall = () => {
    addSystemMessage({
      type: 'info',
      title: '紧急呼叫',
      message: '正在连接管理员，请稍候...',
      acknowledged: false
    });
  };

  const handleEvacuation = () => {
    addSystemMessage({
      type: 'warning',
      title: '紧急疏散',
      message: '车辆已进入疏散模式，所有乘客请立即下车',
      acknowledged: false
    });
  };

  const handleSystemOverride = () => {
    if (userRole.type === 'safety_officer') {
      addSystemMessage({
        type: 'error',
        title: '系统接管',
        message: '安全员已接管系统控制',
        acknowledged: false
      });
    }
  };

  return (
    <div className="control-panel">
      <div className="flex items-center gap-2 mb-6">
        <AlertTriangle size={20} className="text-danger-400" />
        <h3 className="text-lg font-semibold text-white">紧急控制</h3>
      </div>

      {/* 紧急状态指示器 */}
      {vehicleStatus.emergencyStop && (
        <div className="mb-6 p-4 bg-danger-500/20 border border-danger-500/50 rounded-lg">
          <div className="flex items-center gap-2 text-danger-400">
            <div className="w-3 h-3 bg-danger-500 rounded-full animate-pulse" />
            <span className="font-medium">紧急状态已激活</span>
          </div>
        </div>
      )}

      {/* 主要紧急按钮 */}
      <div className="grid grid-cols-1 gap-4 mb-6">
        <button
          onClick={emergencyStop}
          className="hmi-button-danger flex items-center justify-center gap-3 py-4 text-xl font-bold"
        >
          <Square size={24} />
          紧急停车
        </button>

        <button
          onClick={handleEmergencyCall}
          className="hmi-button flex items-center justify-center gap-3 py-4 bg-danger-600 hover:bg-danger-500"
        >
          <Phone size={24} />
          紧急呼叫管理员
        </button>

        <button
          onClick={handleEvacuation}
          className="hmi-button flex items-center justify-center gap-3 py-4 bg-warning-600 hover:bg-warning-500"
        >
          <Users size={24} />
          紧急疏散
        </button>
      </div>

      {/* 音频控制 */}
      <div className="mb-6">
        <h4 className="text-sm font-medium text-gray-300 mb-3">紧急音频</h4>
        <div className="grid grid-cols-2 gap-3">
          <button className="hmi-button-danger flex items-center justify-center gap-2 py-3">
            <Volume2 size={18} />
            最大音量
          </button>
          <button className="hmi-button-secondary flex items-center justify-center gap-2 py-3">
            <VolumeX size={18} />
            静音警报
          </button>
        </div>
      </div>

      {/* 安全员专用控制 */}
      {userRole.type === 'safety_officer' && (
        <div className="mb-6">
          <h4 className="text-sm font-medium text-gray-300 mb-3">安全员控制</h4>
          <div className="grid grid-cols-2 gap-3">
            <button
              onClick={handleSystemOverride}
              className="hmi-button flex items-center justify-center gap-2 py-3 bg-primary-600 hover:bg-primary-500"
            >
              <Shield size={18} />
              系统接管
            </button>
            <button className="hmi-button-secondary flex items-center justify-center gap-2 py-3">
              <Camera size={18} />
              录制证据
            </button>
            <button className="hmi-button-secondary flex items-center justify-center gap-2 py-3">
              <MapPin size={18} />
              位置报告
            </button>
            <button className="hmi-button-secondary flex items-center justify-center gap-2 py-3">
              <Zap size={18} />
              电源管理
            </button>
          </div>
        </div>
      )}

      {/* 紧急联系人 */}
      <div className="mb-6">
        <h4 className="text-sm font-medium text-gray-300 mb-3">紧急联系人</h4>
        <div className="space-y-2">
          <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
            <div>
              <div className="text-sm text-white font-medium">车辆管理员</div>
              <div className="text-xs text-gray-400">138 0000 0000</div>
            </div>
            <button className="hmi-button-danger text-sm px-3 py-1">
              呼叫
            </button>
          </div>

          <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
            <div>
              <div className="text-sm text-white font-medium">软通动力安保</div>
              <div className="text-xs text-gray-400">400-888-8888</div>
            </div>
            <button className="hmi-button-danger text-sm px-3 py-1">
              呼叫
            </button>
          </div>

          <div className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg">
            <div>
              <div className="text-sm text-white font-medium">紧急服务</div>
              <div className="text-xs text-gray-400">120 / 110 / 119</div>
            </div>
            <button className="hmi-button-danger text-sm px-3 py-1">
              呼叫
            </button>
          </div>
        </div>
      </div>

      {/* 紧急指南 */}
      <div className="border-t border-gray-700 pt-4">
        <h4 className="text-sm font-medium text-gray-300 mb-3">紧急处理指南</h4>
        <div className="text-xs text-gray-400 space-y-2">
          <div>• 发生紧急情况时，请保持冷静</div>
          <div>• 优先确保乘客安全</div>
          <div>• 使用紧急停车按钮停止车辆</div>
          <div>• 联系管理员获取进一步指示</div>
          <div>• 记录事件详细信息用于后续处理</div>
        </div>
      </div>
    </div>
  );
};

export default EmergencyPanel;
